<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../node_modules/vue/dist/vue.js"></script>
  <script src="../../node_modules/vue-router/dist/vue-router.js"></script>
  <script src="../../node_modules/vuex/dist/vuex.js"></script>
</head>
<body>
<div id="app">
  <h1>Hello App!</h1>
  <router-link to="/home">home</router-link>
  <router-link to="/admin">admin</router-link>
  <router-view></router-view>
</div>

<script>
  const home = {
    template:'<div>我是主页{{$route.params.id}}</div>'
  };
  const admin = {
    template:'<div>我是管理页面,参数为:{{param1}}</div>',
    data: function () {
      return {
        param1:'',
        param2:''
      }
    },
    mounted: function () {
      this.param1 = this.$route.params.userId;
    }
  };
  const routes = [
    { path: '/home/:id', component: home },
    { path: '/admin/:userId/query', component: admin }
  ]
  var router = new VueRouter({
    routes:routes
  });
  new Vue({
    el:"#app",
    router:router

  });
</script>
</body>
</html>
